<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>跑马灯效果制作</title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="浪起来" @click="lang" />
			<input type="button" value="禁止" @click="stop"/>
			<h3>{{msg}}</h3>
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				msg:"猥琐发育 ~~别浪！！！",
				intervalId:null
			},
			methods:{
				lang(){
					/**
					 * 1.在vue实例内部,如果想获取data上的数据，或调用methods中的方法,必须通过this.属性名 或
					 * 	this.方法名 对其进行访问，this代表当前vue对象
					 * 
					 * 2.vue实例会监听自己身上data中所有的数据的改变，如果data中的数据发生改变，会自动同步数据到
					 * 	页面[ 好处：程序员只需要关心数据，不需要考虑数据同步到页面]
					 */
					console.log(this.msg);
					/*
					 * E6中：
					 * ()=>{} 等同于function(){}
					 *  箭头函数好处:解决this指向问题，内部this即代表外部对象的this
					 */
					if(this.intervalId)  return;
					
					this.intervalId=setInterval( ()=>{
						var start=this.msg.substring(0,1);
						var end=this.msg.substring(1);
						this.msg=end+start;
					},400);
				},
				stop(){
					//停止定时器
					clearInterval(this.intervalId);
					this.intervalId=null;
				}
			}
		});
	</script>
</html>
